<!-- 首页 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="../../assets/css/reset.css" />
    <link rel="stylesheet" href="../../plugins/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="home">
      <!-- header -->
      <div class="header">
        <div class="title"></div>
        <div class="search">
          <span class="icon"></span>
          <span class="search-txt"> 搜索 </span>
        </div>
      </div>
      <!-- banner -->
      <div class="banner">
        <!-- Swiper -->
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide tac">
              <img src="../../assets/images/home/banner.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../../assets/images/home/banner.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- news -->
      <div class="news">
        <div class="left"></div>
        <div class="center">独家！产业链人士：闻泰科技承接三星的...</div>
        <div class="right"></div>
      </div>
      <!-- 热门产品 -->
      <div class="product">
        <div class="title">热门产品</div>
        <div class="list">
          <div class="list-titles">
            <span class="list-title">名称</span>
            <span class="list-title">最新</span>
            <span class="list-title">趋势</span>
            <span class="list-title tar">涨幅</span>
          </div>
          <div class="items">
            <div class="item">
              <div class="name">
                <span class="top"> 沪深300 </span>
                <span class="bottom">
                  <span class="code"> STOSX </span>
                  <img src="../../assets/images/home/xiushi.png" alt="" />
                </span>
              </div>
              <div class="last">3333.851</div>
              <div class="trend">
                <img src="../../assets/images/home/decrease.png" alt="" />
              </div>
              <div class="last tar">+3.62%</div>
            </div>
            <div class="item">
              <div class="name">
                <span class="top"> 沪深300 </span>
                <span class="bottom">
                  <span class="code"> STOSX </span>
                  <img src="../../assets/images/home/xiushi.png" alt="" />
                </span>
              </div>
              <div class="last">3333.851</div>
              <div class="trend">
                <img src="../../assets/images/home/decrease.png" alt="" />
              </div>
              <div class="last tar">+3.62%</div>
            </div>
            <div class="item">
              <div class="name">
                <span class="top"> 沪深300 </span>
                <span class="bottom">
                  <span class="code"> STOSX </span>
                  <img src="../../assets/images/home/xiushi.png" alt="" />
                </span>
              </div>
              <div class="last">3333.851</div>
              <div class="trend">
                <img src="../../assets/images/home/decrease.png" alt="" />
              </div>
              <div class="last tar">+3.62%</div>
            </div>
            <div class="item green">
              <div class="name">
                <span class="top"> 沪深300 </span>
                <span class="bottom">
                  <span class="code"> STOSX </span>
                  <img src="../../assets/images/home/busyness.png" alt="" />
                </span>
              </div>
              <div class="last">3333.851</div>
              <div class="trend">
                <img src="../../assets/images/home/increase.png" alt="" />
              </div>
              <div class="last tar">-3.62%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="zw"></div>
      <!-- tabbar -->
      <div class="tabs">
        <div class="tab active">
          <img src="../../assets/images/home/home.png" alt="" />
          <span class="text">首页</span>
        </div>
        <div class="tab">
          <img src="../../assets/images/home/chicang.png" alt="" />
          <span class="text">持仓</span>
        </div>
        <div class="tab">
          <img src="../../assets/images/home/mobile.png" alt="" />
          <span class="text">客服</span>
        </div>
        <div class="tab">
          <img src="../../assets/images/home/my.png" alt="" />
          <span class="text">我的</span>
        </div>
      </div>
    </div>
    <!-- Swiper JS -->
    <script src="../../plugins/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.mySwiper', {
        pagination: {
          el: '.swiper-pagination'
        }
      })
    </script>
  </body>
  <script src="../../assets/js/rem.js"></script>
</html>
